<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>ChucK + JS => ChucKScript</title>
    <link rel="stylesheet" href="./css/editor.css">
  </head>
  <body onresize="chuckEditor.resize();">
<div>
    <div id="program">// Hi there, take a look at this example!
global int mouseX;
global Event mouseClicked;
SinOsc foo => dac;
300 => float currentBaseFrequency;

// The sine wave's frequency is mapped to 
// the x position of the mouse...
fun void RespondToMouseMovement()
{
    while( true )
    {
        currentBaseFrequency + 0.3 * mouseX => foo.freq;
        10::ms => now;
    }
}
spork ~ RespondToMouseMovement();

//... plus some randomness!
fun void UpdateBaseFrequency()
{
    while( true )
    {
        Math.random2f( 300, 600 ) => currentBaseFrequency;
        200::ms => now;
    }
}
spork ~ UpdateBaseFrequency();

// It will stop playing when you click the mouse
// (at least 1 minute after starting)
// (you can also stop it with the "remove" button below)
1::minute => now;
mouseClicked => now;
</div>
</div>
<div class="buttons">
    <button class="chuckButton" id="startChuck" disabled="disabled">Start ChucK</button>
    <button class="chuckButton" id="compileButton" disabled="disabled">Compile and Run</button>
    <button class="chuckButton" id="replaceButton" disabled="disabled">Replace</button>
    <button class="chuckButton" id="removeButton" disabled="disabled">Remove</button>
    <button class="chuckButton" id="clearButton" disabled="disabled">Clear VM and Globals</button>
    <button class="chuckButton" id="micButton" disabled="disabled">Enable Microphone</button>
    <button class="chuckButton" id="fileFormButton">Show File Uploader</button>
</div>
<div id="fileForm" class="hidden">
    <p>File name to use in ChucK: <input type="text" id="uploadFilename"></p>
    <p>Local file to upload: <input type="file" id="uploadFile" name="uploadFile"></p>
    <p><button class="chuckButton" id="fileButton" disabled="disabled">Upload File to Virtual File System</button></p>
</div>
<div>
    <textarea id="output"></textarea>
    <div id="shreds">
        <table id="shredstable">
            <col width="60px">
            <col width="1*">
            <col width="50px">
            <col width="60px">
            <tr><th>shred</th><th>code</th><th>time</th><th>remove</th>
        </table>
    </div>
    <div class="clearfix"></div>
</div>
    <script src="./js/ace-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="./js/editor.js"></script>
    <script type="text/javascript" src="./js/defer.js"></script>
    <script>
        // no need to override this, but this is how you would do it:
        // the path from the HTML file to chuckscript.[js,wasm]
        var whereIsChuck = "./js";
        
        // files we want to load into our virtual filesystem
        var serverFilesToPreload = [
            {
                serverFilename: './wav/aah.wav',
                virtualFilename: 'aah5.wav'
            }
        ];
    </script>
    <script type="text/javascript" src="./js/webchuck_host.js"></script>
    <script type="text/javascript" src="./js/host.js"></script>
    <script>
        theChuckReady.then( function() {
            if( window.Event ) { 
                document.captureEvents( Event.MOUSEMOVE );
            }
            document.onmousemove = function( e )
            {
                var x = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
                var y = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
                theChuck.setInt( "mouseX", x );
            }
            document.onclick = function( e )
            {
                theChuck.broadcastEvent( "mouseClicked" );
            }
        });
    </script>
  </body>
</html>


